<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
        #app {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        table {
            border-collapse: collapse;
            margin: 0 auto;
            text-align: center;
        }

        table td,
        table th {
            border: 1px solid #cad9ea;
            color: #666;
            height: 30px;
        }

        table thead th {
            background-color: #cce8eb;
            width: 100px;
        }

        table tr:nth-child(odd) {
            background: #fff;
        }

        table tr:nth-child(even) {
            background: #f5fafa;
        }

        img {
            border: solid 1px black;
        }
    </style>
</head>

<body>
    <div id="app">
        <img :src="image" width="640px" height="480px" alt="图片已被删除或加载失败" />
        <div style="color: red; font-size: 30px;">{{ diff }}</div>
        <div>
            <table>
                <thead>
                    <th>编号</th>
                    <th>名字</th>
                    <th>操作</th>
                    <th style="width: 200px;">时间</th>
                    <th style="width: 500px;">图片地址</th>
                </thead>
                <tbody>
                    <tr v-for="(item, i) in itemList" :key="item.id" @click="itemClick(item, i)"
                        :style="{backgroundColor: i === index ? '#ccc' : ''}">
                        <td>{{item.rfcode}}</td>
                        <td>{{item.rfsskb}}</td>
                        <td>{{item.rfzt}}</td>
                        <td>{{item.rfdate}} {{item.rftime}}</td>
                        <td>{{item.rfbmp}}</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</body>
<script>
    const db = require('./db.js')
    const dayjs = require('dayjs')
    const Vue = require('vue/dist/vue.common.js')
    const path = require('path')
    const app = new Vue({
        data() {
            return {
                index: 0,
                itemList: []
            }
        },
        computed: {
            image() {
                const item = this.itemList[this.index]
                return item ? path.join(process.cwd(), item.rfbmp) : ''
            },
            diff() {
                const item = this.itemList[this.index]
                if (item) {
                    const seconds = dayjs().diff(dayjs(item.rfdate + ' ' + item.rftime)) / 1000
                    return `${Math.floor(seconds / (3600 * 24))}天 ${Math.floor((seconds % (3600 * 24)) / 3600)}小时 ${Math.floor(
                            ((seconds % (3600 * 24)) % 3600) / 60
                        )}分 ${Math.floor(((seconds % (3600 * 24)) % 3600) % 60)}秒`
                } else {
                    return ''
                }
            }
        },
        methods: {
            itemClick(item, i) {
                this.index = i
            }
        }
    }).$mount('#app')
    require('electron').ipcRenderer.on('ping', async (event, rfcode) => {
        document.title = `${rfcode} 的操作记录`
        app.itemList = await db.find10(rfcode)
    })
</script>

</html>